<template>
  <div>
    <el-dialog title="员工分配角色" :visible.sync="dialogFormVisible" :before-close="close" :close-on-click-modal="false">
      <el-form :model="form">
        <el-form-item label="员工Id" :label-width="formLabelWidth">
          {{userInfo.userId}}
        </el-form-item>
        <el-form-item label="员工名称" :label-width="formLabelWidth">
          {{userInfo.visitorRealName}}
        </el-form-item>
        <el-form-item label="员工账号" :label-width="formLabelWidth">
          {{userInfo.visitorPhoneNum}}
        </el-form-item>
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-select v-model="roleId" placeholder="请选择">
            <el-option
              v-for="item in roleData"
              :key="item.value"
              :label="item.name"
              :value="item.roleId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { roleList } from 'api/system'
import { updateVisitor } from 'api/visitorManager'
export default {
  props: ['userInfo'],
  data() {
    return {
      dialogFormVisible: true,
      formLabelWidth: '120px',
      roleData: [],
      form: {},
      roleId: ''
    }
  },
  created() {
    this.getList()
    this.roleId = this.userInfo.roleId
  },
  methods: {
    async getList() {
      const parm = {
        pageSize: 999999,
        curPage: 0,
        roleName: ''
      }
      try {
        let back = await roleList(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.roleData = back.result
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    },
    close() {
      console.log('close dialog')
      this.$emit('close')
    },
    async submit() {
      const parm = { ...this.userInfo }
      parm.roleId = this.roleId
      try {
        let back = await updateVisitor(parm)
        back = back.data
        if (back.resultCode === '200') {
          this.close()
        } else {
          this.$alert(back.msg, '提示')
        }
      } catch (err) {
        this.$alert('请求出错', '提示')
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
